<template>
  <div>
    <a-card title="Title" style="width: 300px">
      <!-- <template #extra><a href="#">more</a></template> -->
      <p>测试vue3  setup组件使用</p>
      <p>card content</p>
      <p>card content</p>
    </a-card>

    <!-- 动态组件 -->
    <div>
      <span>动态组件</span>
      <component :is="isBar ? Foo : Bar"  ></component>
      <Bar 
        :name="name"
        @setNum="setNum"
        :num="num"
        ref="barRef"
      />
    </div>
    <!-- 触发子组件事件-->
    <div>
      <p>使用方法</p>
      <a-button @click="handleChangeVisible">change-visible</a-button>
    </div>

    <!-- dialog -->
    <a-button type="primary" @click="handleOpenDialog">open弹框</a-button>

    <Dialog ref="dialogRef" />
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, watch, computed, watchEffect, unref} from 'vue'
import type {Ref} from 'vue'
import Bar from './isComponent/Bar.vue'
import Foo from './isComponent/Foo.vue'
import Dialog from './isComponent/Dialog.vue'

const isBar = ref(true)
let name = ref('')
let num = ref(0)
name.value = isBar.value ? 'bar' : 'foo'
const state = reactive({
  count: 1
})
// 子组件通知修改数据
const setNum = (newVal: any) => {
  num.value = num.value + newVal
}

// 调用子组件的方法
const barRef = ref<any>();
const handleChangeVisible = () => {
  barRef.value.setVisible()
}

// computed 使用
const count1 = ref(1)
const newCount1 = computed(() => count1.value + 1)
console.log(newCount1.value, 'computed---newCount1---计算后的新值')

const count2 = ref(1)
const newCount2 = computed({
  get: () => count2.value,
  set: val => {
    count2.value = val - 1
  }
})
newCount2.value = 3
console.log(count2.value, newCount2.value, 'computed---set--get')

// watchEffect 使用(会先立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数)
const effectVlaue = ref(0)
watchEffect(() => console.log(effectVlaue.value, 'watchEffect--执行'))
setTimeout(() => {
  effectVlaue.value++
}, 1000)

// watch (侦听对象, 侦听一个值)
const watch1 = reactive({count: 1})
watch(
  () => watch1.count,
  (cur, prev) => {
    
  }
)
const watch2 = ref(1)
watch(watch2, (cur, prev) => {

})

/**
* watch：
*   具备一定的惰性。
*   参数可以拿到最新值和之前的值。
*   可以侦听多个数据的变化，用一个侦听器承载。
*   给 watch 第三个参数 添加 { immediate:true } 可以立即执行，没有惰性。
*
* watchEffect：
*   立即执行，没有惰性。
*   不需要传递侦听的内容，自动感知代码依赖，不需要传递很多参数，只用传递一个回调函数。
*   不能获取之前的值。
**/

const dialogRef = ref()
const handleOpenDialog = () => {
  console.log(dialogRef, '?')
  dialogRef.value.showModal({test: 1})
}



// unref  --- 判断参数是否是ref的语法糖
// val = isRef(vla) ? val.value : val

function useFoo (x: number | Ref<number>) {
  const newRef = unref(x)
}
let str = ` 
你发如雪凄美了离别 我焚香感动了谁
你发如雪纷飞了眼泪 我等待苍老了谁
`


let s = ``



</script>
<style scoped lang="scss">

</style>